<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://unpkg.com/vue@3.4.27/dist/vue.global.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/@picocss/pico@2.0.6/css/pico.css">
    <script src="https://unpkg.com/axios@1.7.2/dist/axios.min.js"></script>
    <title>订单页面</title>
    <style>
        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            position: relative;
        }
        .form-group {
            margin-bottom: 15px;
        }
        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        .form-group input, .form-group select {
            width: 100%;
            padding: 8px;
            box-sizing: border-box;
        }
        .btn {
            padding: 10px 20px;
            color: white;
            border: none;
            cursor: pointer;
        }
        .btn-info {
            background-color: #007bff; /* 与订单记录页面中的返回按钮颜色一致 */
        }
        .btn-info:hover {
            background-color: #007bff; /* 悬停颜色 */
        }
        .btn-primary {
            background-color: #007bff; /* 提交按钮颜色 */
        }
        .btn-primary:hover {
            background-color: #007bff; /* 悬停颜色 */
        }
        .button-container-right {
            position: absolute;
            top: 20px;
            right: 20px;
            z-index: 1000;
        }
        .page-title {
            position: absolute;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 24px;
            font-weight: bold;
        }
        html, body {
            height: 100%;
            margin: 0;
        }
        body {
            background-image: url('img_13.png');
            background-size: cover;
            background-position: center;
            min-height: 100vh;
            background-attachment: fixed;
        }
        h1 {
            text-align: center;
            margin-top: 20px;
        }
    </style>
</head>
<body>
<div id="app" class="container">
    <!-- 返回按钮 -->
    <div class="button-container-right">
        <button type="button" class="btn btn-info" @click="exit">返回</button>
    </div>

    <h1>订单页面</h1>
    <form @submit.prevent="submitOrder">
        <div class="form-group">
            <label for="productName">商品名称</label>
            <input type="text" id="productName" v-model="order.productName" readonly>
        </div>
        <div class="form-group">
            <label for="quantity">数量</label>
            <input type="number" id="quantity" v-model="order.quantity" min="1" required>
        </div>
        <div class="form-group">
            <label for="shippingAddress">邮寄地址</label>
            <input type="text" id="shippingAddress" v-model="order.shippingAddress" required>
        </div>
        <div class="form-group">
            <label for="paymentMethod">支付方式</label>
            <select id="paymentMethod" v-model="order.paymentMethod" required>
                <option value="积分支付">积分支付</option>
                <option value="支付宝">支付宝</option>
                <option value="微信支付">微信支付</option>
                <option value="银行卡">银行卡</option>
            </select>
        </div>
        <div>
            <button type="submit" class="btn btn-primary">提交订单</button>
        </div>
    </form>
</div>

<script>
    const App = {
        data() {
            return {
                order: {
                    productName: '',
                    quantity: 1,
                    shippingAddress: '',
                    paymentMethod: '积分支付',
                    userId: null,
                    productId: null
                }
            };
        },
        methods: {
            submitOrder() {
                axios.post('/api/orders', this.order)
                    .then(response => {
                    alert('订单提交成功！');
                        window.location.href = 'order-history.html';
                    })
                    .catch(error => {
                        console.error('订单提交失败：', error);
                        alert('订单提交失败，请重试。');
                    });
            },
            exit() {
                window.history.back();
            }
        },
        mounted() {
            const urlParams = new URLSearchParams(window.location.search);
            this.order.productId = parseInt(urlParams.get('productId'));
            this.order.userId = parseInt(urlParams.get('userId'));
            this.order.productName = decodeURIComponent(urlParams.get('productName'));

            if (isNaN(this.order.userId) || this.order.userId <= 0 || isNaN(this.order.productId) || this.order.productId <= 0) {
                alert("用户 ID 或商品 ID 无效，请重选择商品！");
                window.history.back();
            }
        }
    };
    const app = Vue.createApp(App);
    app.mount("#app");
</script>
</body>
</html>